<template>
	<view class="container">
		<view class="panel-header padding-top solid-bottom">
			<view class="g-goBack" @click="$utils.toBack()">
				<view class="cuIcon-back"></view>
			</view>
			<view class="text-cut">{{placeName}}</view>
		</view>
		<view class="cu-card no-card">
			<view class="cu-item">
				<form>
					<view class="cu-form-group">
						<view class="title">姓名</view>
						<input placeholder="请填写(必填项)" v-model="info.userName" :value="info.userName"></input>
					</view>
				    <view class="cu-form-group">
						<view class="title">手机号</view>
						<input placeholder="请填写(必填项)" v-model="info.phone" :value="info.phone"></input>
						<button class="cu-btn bg-orange shadow" @click="showModal" data-target="clerkList">选择</button>
				    </view>
					<view class="cu-form-group">
						<view class="title">描述</view>
						<input placeholder="请填写(必填项)" v-model="info.note" :value="info.note"></input>
					</view>
				</form>
			</view>
		</view>
		<view class="cu-bar btn-group margin-top">
		    <button class="cu-btn bg-grey shadow-blur round" @click="btnCancel()">取消</button>
			<button class="cu-btn bg-orange shadow-blur round" @click="btnSaveSubmit()">确定</button>
		</view>
		
		<view class="cu-modal" :class="modalName=='clerkList'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">选择已有店员</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="list-body">
					<scroll-view scroll-y @scrolltolower="scrollTolower">
						<view class="cu-card article" v-for="(item,index) in listData" :key="index">
							<view class="cu-item">
								<view class="flex justify-between">
									<view>
										<view class="text-cut text-orange">（{{item.userId}}）{{item.userName}}</view>
										<view><text class="tt">手机号：</text>{{item.userPhone}}</view>
										<view><text class="tt">备注：</text>{{item.note}}</view>
									</view>
									<view class="padding-top-sm"><button class="cu-btn sm line-orange" 
										@click="btnSelectClerk" :data-index="index">选择</button></view>
								</view>
							</view>
						</view>
						<view class="foot" v-if="listData && listData.length > 0"><text class="ftxt">我也是有底线的</text></view>
						<view class="foot" v-else><text class="ftxt">暂无数据</text></view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				placeId:null,
				placeName:'网点名称',
				info:{},
				listData:[],
				pageNo:1,
				modalName:null
			};
		},
		onLoad(option) {
			const _self = this;
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('fromData', function(data) {
			    console.log(data)
				_self.placeId = data.placeId;
				_self.placeName = data.placeName;
			})
		},
		methods: {
			_loadListData:function(){
				if(this.pageNo > 0){
					uni.showLoading({
						title:'加载中...'
					})
					const _self = this;
					const api = this.$request;
					api.post(api.url.clerkList,{
						pageNo:this.pageNo
					},(res)=>{
						console.log(res)
						uni.hideLoading();
						if(res.code==200){
							_self.listData = _self.listData.concat(res.body.items);
							_self.pageNo = _self.pageNo + 1;
						}else if(res.code == 202){
							_self.pageNo = -1;
						}else if(res.msg){
							uni.showModal({
								content:res.msg,
								showCancel:false
							})
						}else{
							uni.showToast({
								title:'获取数据失败',
								icon:'error'
							})
						}
					})
				}
			},
			showModal(e) {
				this._loadListData();
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			btnSelectClerk:function(e){
				var index = e.currentTarget.dataset.index
				console.log(index);
				var info = this.listData[index];
				console.log(info);
				this.info.userName = info.userName;
				this.info.userId = info.userId;
				this.info.phone = info.userPhone;
				this.info.note = info.note;
				this.modalName = null
				this.$forceUpdate();
			},
			btnCancel:function(){
				uni.navigateBack();
			},
			btnSaveSubmit:function(item){
				const _self = this;
				const api = this.$request;
				api.post(api.url.placeClerkSave,{
					placeId:this.placeId,
					phone:this.info.phone,
					name:this.info.userName,
					note:this.info.note
				},res=>{
					console.log(res)
					if(res.code==200){
						uni.showToast({
							title:'保存成功',
							icon:'success'
						});
						setTimeout(function(){
							uni.navigateBack();
						},1000)
					}else if(res.msg){
						uni.showModal({
							content:res.msg,
							showCancel:false
						});
					}else {
						uni.showToast({
							title:'操作失败',
							icon:'error'
						});
					}
				})
			},
			//滑动底部加载
			scrollTolower:function(e){
				console.log(e);
				this._loadListData();
			}
		}
	}
</script>

<style lang="less">
.container .panel-header{height:90rpx;width:100vw;font-size:28rpx;background-color:#fff;}
.container .panel-header .text-cut{width:75%;margin:auto;text-align:center;}
.container .cu-form-group .title{min-width:calc(4em + 15rpx);display:inline-block;}
.container .list-body scroll-view{height:60vh;}
.container .list-body .cu-card>.cu-item{position:relative;margin-bottom:0;margin-top:15rpx;text-align:left;padding:15rpx 20rpx;}
.container .list-body .cu-card .tt {min-width:calc(4em + 15rpx);display:inline-block;text-align:left;}
</style>
